<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
  <div style="padding:10px">
    <van-row type="flex">
      <van-col :span="18">
        <div class="L-text">
          <van-icon name="location-o" />
          {{mapData.name}}
        </div>
        <div class="L-margin-top-10 L-small-text L-secondary-text-color">
          详细地址:{{mapData.address}}
        </div>
      </van-col>
      <van-col :span="6">
        <div>
          <van-button @click="openGaodeMap" round size="small" style="width: 80px;" type="primary">
            <i class="iconfont icon-daohang1 L-small-text"></i>
            导航
          </van-button>
        </div>
      </van-col>
    </van-row>

  </div>

</template>
  
  <script setup lang="ts">
import { onMounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
// const map = ref(null);
const props = defineProps({
  mapData: {
    type: Object,
    default: {},
  },
});

function initMap() {
  const { mapData } = props;
  AMapLoader.load({
    key: "e762e8d8003a79d26ece5f84b4afbfb0", // 高德地图API Key
    version: "2.0", // 指定API版本
    plugins: ["AMap.Geolocation", "AMap.PlaceSearch", "AMap.Scale"], // 需要使用的插件
  })
    .then((AMap) => {
      const map = new AMap.Map("map", {
        resizeEnable: true,
        viewMode: "2D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
      });

      const placeSearch = new AMap.PlaceSearch({
        pageSize: 20,
        map: map,
      });

      placeSearch.search(mapData.name, (status, result) => {
        // console.log(status, result)
        if (status === "complete" && result.info === "OK") {
          // 如果搜索成功且有搜索结果
          if (result.poiList.pois.length > 0) {
            // 取第一个搜索结果，设置地图中心和缩放级别
            const poi = result.poiList.pois[0];
            map.setCenter([poi.location.lng, poi.location.lat]);
            map.setZoom(15); //缩放级别
            const position = new AMap.LngLat(
              poi.location.lng,
              poi.location.lat
            );
            // var markerContent =
            //   "" +
            //   '<div class="custom-content-marker">' +
            //   '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width:30px">' +
            //   "</div>";

            // var marker = new AMap.Marker({
            //   position: position,
            //   // 将 html 传给 content
            //   content: markerContent,
            //   // 以 icon 的 [center bottom] 为原点
            //   offset: new AMap.Pixel(-13, -30),
            // });

            // map.add(marker);

            // console.log(addressList.value)
          } else {
            console.log("未找到相关地点！");
          }
        } else {
          console.log("搜索失败！");
        }
      });

      return;

      geolocation.getLocation(mapData.address, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
          const lnglat = result.geocodes[0].location;

          map.value = new AMap.Map("map", {
            zoom: 15, // 初始缩放级别
            center: [lnglat.lng, lnglat.lat], // 初始中心点坐标
          });

          var position = new AMap.LngLat(lnglat.lng, lnglat.lat);
          var markerContent =
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width:30px">' +
            "</div>";

          var marker = new AMap.Marker({
            position: position,
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30),
          });

          map.value.add(marker);
        }
      });

      // 将 markers 添加到地图
    })
    .catch((e) => {
      console.error(e);
    });
}

onMounted(() => {
  initMap();
});

const openGaodeMap = () => {
  const { lat, lng, name } = props.mapData;
  // const query = name; // 搜索的地点名称

  let app_url = `${getScheme()}?sourceApplication=com.mzwu.www&dlat=${lat}&dlon=${lng}&dname=${name}&dev=0&t=0`;
  window.location.href = app_url;

 };

function getScheme() {
  let agent = navigator.userAgent.toLowerCase();
  if (agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1) {
    return "iosamap://path";
  } else {
    return "amapuri://route/plan";
  }
}
</script>
  
  <style scoped>
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
</style>